<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="automatic" @scroll="scroll" :refresher-enabled="false">
    <template #top>
      <u-navbar
        :is-back="true"
        :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
      </u-navbar>
    </template>
    <view class="p-4 flex flex-col gap-[36px]">
      <view class="flex flex-col gap-3">
        <image src="/static/font_hi,WelcomeToFishingSpotExpert@3X.png" class="h-[55px]" mode="heightFix" />
        <view class="text-[12px] text-[#919499]"> 未注册的手机号在接受协议并填入我们发送的验证码后将自动创建钓点达账号 </view>
      </view>
      <view class="w-full h-[48px] bg-[#FFFFFF] rounded-[8px] flex items-center px-2">
        <view class="w-[60px] text-center">+86</view>
        <input type="number" class="flex-1 h-full" placeholder="请输入手机号码" maxlength="11" v-model="mobile" />
      </view>
      <view
        class="w-full h-[44px] flex justify-center items-center rounded-full"
        :style="{ backgroundColor: isValidMobile ? '#00A9AB' : '#99DBDC' }"
        @click="sendSms"
      >
        <view class="text-[16px] text-[#E5F6F6] font-medium">获取验证码</view>
      </view>
      <view class="flex gap-2 justify-center items-center">
        <view
          class="size-[12px] rounded-sm flex items-center justify-center"
          :style="{ backgroundColor: isAgree ? '#00A9AB' : 'transparent' }"
          :class="isAgree ? '' : 'border border-[#919499]'"
          @click="isAgree = !isAgree"
        >
          <text v-if="isAgree" class="text-white text-[10px]">✓</text>
        </view>
        <view class="text-[12px] text-[#919499] font-medium flex items-center">
          我已阅读并同意
          <view class="text-[#00A9AB]" @click="vk.navigateTo('/pages/login/agreement?type=1')"> 《用户协议》 </view>
          及
          <view class="text-[#00A9AB]" @click="vk.navigateTo('/pages/login/agreement?type=2')"> 《隐私政策》 </view>
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 添加滚动事件
        dataList: [], //  添加数据列表
        automatic: false, //  添加自动加载
        mobile: '18599932826', // 添加手机号码
        isAgree: true // 添加协议同意状态
      }
    },

    methods: {
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      },
      async sendSms() {
        vk.pubfn.debounce(async () => {
          if (!this.mobile) return vk.toast('请输入手机号码')
          if (!vk.myfn.validatePhone(this.mobile)) return vk.toast('请输入正确的手机号码')
          if (!this.isAgree) return vk.toast('请同意协议')
          let res = await api.sendSms({
            mobile: this.mobile,
            template_code: 'user_login'
          })
          if (!res.code) return vk.alert(res.msg)
          // if (!res.code) return vk.toast(res.msg, 'none')
          vk.toast('发送成功', e => {
            vk.navigateTo('/pages/login/verificationCode?mobile=' + this.mobile)
          })
        }, 1000)
      }
    },
    computed: {
      isValidMobile() {
        return this.mobile.length === 11
      }
    }
  }
</script>

<style lang="scss" scoped></style>
